<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,width=device-width" />
    <title>hello world</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.js" ></script>
</head>
<body>
	<div data-role = "page" id="first">
		<div data-role = "header" data-position = "fixed">
			<h1>header</h1>
		</div>
		<div role="main" class="ui-content">
			<p>firstPage</p>
			<a href="#second" data-transition = "slide">go secondPage</a>
		</div>
		<div data-role = "footer" data-position = "fixed">
			<h1>footer</h1>
		</div>
	</div>
	<div data-role = "page" id="second">
		<div data-role = "header" data-position = "fixed">
			<h1>header</h1>
		</div>
		<div role="main" class="ui-content">
			<p>secondPage</p>
			<a href="thirdPage.html" data-transition = "slide">go thirdPage</a>
		</div>
		<div data-role = "footer" data-position = "fixed">
			<h1>footer</h1>
		</div>
	</div>
</body>
</html>